<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue'
import {
  ChangeFilePrivate,
  DelFile,
  GetFileList,
  OpenTarFileDialog,
  TarFile,
  UpdateFileInfo
} from "../../../../wailsjs/go/view/App";
import {Search,Plus,Delete,Setting} from "@element-plus/icons-vue";
import {tables} from "../../../../wailsjs/go/models.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import VideoPlayer from '../components/videoPlayer.vue';
import { useDownload } from '../../../utils/download.ts'
import {useBaseStore} from "@/stores/base.ts";

const baseStore = useBaseStore()
const {
  isLoading,
  downloadRemoteFile: downloadRemote
} = useDownload()
const searchForm = reactive({
  name:"",
  label:"",
  isPrivate:false,
})
const videoPlayerRef = ref()
const tableData = ref<tables.TarFile[]>([])
const multipleSelection = ref<tables.TarFile[]>([])
const editDialog = ref(false)
const editForm = reactive({
  id:"",
  name:"",
  docType:"",
  docSuffix:"",
  label:"",
  description:""
})

onMounted(()=>{
  GetFileList(searchForm).then(res =>{
    tableData.value = res
  })
})
const clickShowPrivate = ()=>{
  if ( baseStore.showPrivate ){
    baseStore.showPrivate = false
    onSearchList()
    return
  }
  ElMessageBox.prompt('请输入密码', 'Tip', {
    confirmButtonText: '提交',
    cancelButtonText: '取消',
  })
    .then(({ value }) => {
      if ( value ==baseStore.privateSecret ){
        baseStore.showPrivate = true
        onSearchList()
      }else {
        ElMessage({
          message: '密码不正确!',
          type: 'warning',
        })
      }
    })
}
const onSearchList = ()=>{
  searchForm.isPrivate = baseStore.showPrivate
  GetFileList(searchForm).then(res =>{
    tableData.value = res
  })
}
const clickAddBtn = async ()=>{
  const fPath = await OpenTarFileDialog()
  await TarFile(fPath).then(()=>{
    ElMessage({
      message: '归档ok!',
      type: 'success',
    })
  })
  onSearchList()
}
const handleSelectionChange = (val:tables.TarFile[])=>{
  multipleSelection.value = val
}
const clickDelBtn =()=>{
   multipleSelection.value.forEach(item =>{
    DelFile(item.id.toString())
  })
  multipleSelection.value=[]
  onSearchList()
}
const clickOpenBtn = (row:tables.TarFile)=>{
  console.log(row)
  videoPlayerRef.value.videoUrl = "http://localhost:9966/media/tar/"+row.md5+'.hpd'
  videoPlayerRef.value.dialogVisible = true
}
const clickDownloadBtn =async (row:tables.TarFile)=>{
  const url = "http://localhost:9966/media/tar/"+row.md5+'.hpd'
  const name = row.name+"."+row.docSuffix
  await downloadRemote(url, name)
}

const clickEditBtn = (row:tables.TarFile)=>{
  editForm.id = row.id.toString()
  editForm.name = row.name
  editForm.label = row.label
  editForm.description = row.description
  editForm.docType = row.docType
  editForm.docSuffix = row.docSuffix
  editDialog.value = true
}
const clickSubEditFormBtn =async () =>{
  await UpdateFileInfo(editForm)
  onSearchList()
  editDialog.value = false
}
const clickPrivateBtn = async (row:tables.TarFile)=>{
  await ChangeFilePrivate(row.id.toString())
  onSearchList()
}

const clickNasBtn = ()=>{
  ElMessage({
    message: 'nas 服务还没写!',
    type: 'warning',
  })
}

</script>

<template>
  <div>
    <VideoPlayer ref="videoPlayerRef"></VideoPlayer>
    <el-dialog
      v-model="editDialog"
      title="编辑归档信息"
      width="500"
    >
      <el-form :model="editForm" >
        <el-form-item label="文件名称" >
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="归档类型" >
          <el-select v-model="editForm.docType" placeholder="请选择文件类型">
            <el-option label="视频" value="video" />
            <el-option label="归档" value="tar" />
            <el-option label="文本" value="text" />
          </el-select>
        </el-form-item>
        <el-form-item label="文件类型" >
          <el-input v-model="editForm.docSuffix" />
        </el-form-item>
        <el-form-item label="归档标签" >
          <el-input v-model="editForm.label" />
        </el-form-item>
        <el-form-item label="归档描述" >
          <el-input v-model="editForm.description" type="textarea"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialog = false">取消</el-button>
          <el-button type="primary" @click="clickSubEditFormBtn">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-card>
      <div class="flex justify-between">
        <div class="flex">
          <el-form :model="searchForm" :inline="true">
            <el-form-item label="文件名称" >
              <el-input v-model="searchForm.name" clearable/>
            </el-form-item>
            <el-form-item label="标签" >
              <el-input v-model="searchForm.label" clearable/>
            </el-form-item>
          </el-form>
          <el-button type="primary" :icon="Search" @click="onSearchList">查询</el-button>
          <el-button type="primary" :icon="Plus" @click="clickAddBtn">添加</el-button>
          <el-button type="primary" :icon="Delete" @click="clickDelBtn">删除</el-button>
        </div>
        <div class="flex justify-end">
          <el-tooltip content="nas设置" placement="top">
            <el-button @click="clickNasBtn" :icon="Setting" circle />
          </el-tooltip>
          <el-tooltip content="显示隐私文件" placement="top">
            <el-button circle @click="clickShowPrivate">
              <SvgIcon name="fileShow" size="16px" v-if="baseStore.showPrivate"/>
              <SvgIcon name="fileHide" size="16px" v-else/>
            </el-button>
          </el-tooltip>
        </div>
      </div>
    </el-card>
    <el-card>
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column property="name" label="文件名" width="120" />
        <el-table-column property="docType" label="文件类型" width="120" />
        <el-table-column property="label" label="标签"  />
        <el-table-column property="description" label="描述" />
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button @click="clickOpenBtn(scope.row)" v-if="scope.row.docType=='video' " link type="primary" size="small" >
              播放
            </el-button>
            <el-button @click="clickDownloadBtn(scope.row)" v-else link type="primary" size="small" >
              下载
            </el-button>
            <el-button @click="clickEditBtn(scope.row)" link type="primary" size="small">编辑</el-button>
            <el-button @click="clickPrivateBtn(scope.row)" link type="primary" size="small">{{ scope.row.isPrivate?'显示':'隐藏' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped lang="scss">

</style>
